<template>
	<view>
		<view class="fix_menu">
			<view class="item" v-for="(item,index) in tab" :key="index" @click="get_list(item.status)">
				<text :class="status == item.status ? 'active' : ''">{{item.title}}</text>
			</view>
		</view>
		<view class="w100 order_list">
			<view v-if="list.length">
				<view class="w100 order_item mb20" v-for="(item, i) in list" @click="toDetail(item.order_refund_id)">
					<view class="w100 order_top">
						<view class="fl time">
							<text>{{ item.create_time }}</text>
						</view>
						<view class="fr status">
							<text>{{ item.status_name }}</text>
						</view>
					</view>
					<view class="w100 goods_list">
						<view class="w100 item">
							<image :src="item.file_path" mode=""></image>
							<view class="fr item_msg">
								<view class="title">
									{{ item.goods_name }}
								</view>
								<view class="props">
									{{ item.goods_props.toString() }} ×{{ item.total_num }}
								</view>
								<view class="w100 price">
									<view class="b_price">
										<text class="sub">￥</text><text>{{ item.goods_price }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-empty" v-else>
				<u-empty text="暂无数据"
					icon="https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250311/0057423001741660320.png"></u-empty>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		get_refund_list
	} from "@/api/refund.js"

	const list = ref([]);
	const tab = ref([{
			title: '全部售后',
			status: 0
		},
		{
			title: '待处理',
			status: 1
		}
	])
	const status = ref(0);
	const p = ref(1);

	onLoad((option) => {
		status.value = option.status;
		get_list(status.value);
	})
	
	// 监听上拉加载事件
	onReachBottom(() => {
		p.value++;
		get_refund_list({
			status: status.value,
			p: p.value
		}).then(res => {
			let data = res.data;
			list.value = list.value.concat(data);
		})
	});

	//获取列表
	function get_list(t) {
		list.value = [];
		p.value = 1;
		status.value = t;
		get_refund_list({
			status: t,
			p: 1
		}).then(res => {
			let data = res.data;
			list.value = data;
		})
	}



	// 跳转订单详情
	function toDetail(order_refund_id) {
		uni.navigateTo({
			url: `/pages/refund/detail?order_refund_id=${ order_refund_id }`
		});
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/order.scss';

	.fix_menu {
		width: 100%;
		text-align: center;
		overflow: hidden;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		position: fixed;
		padding: 30rpx 0 0;
		top: 0;
		left: 0;
		z-index: 100;

		.item {
			float: left;
			width: 50%;
			color: #333;

			text {
				border-bottom: 2px solid transparent;
				display: table;
				padding-bottom: 10rpx;
				margin: auto;
			}

			.active {
				color: #f00;
				border-bottom: 2px solid #F00;
			}
		}
	}



	.order_list {
		padding: 30rpx;
		padding-top: 100rpx;

		.order_item {
			padding: 30rpx;
			border-radius: 10px;
			background: #fff;

			.goods_list {
				padding: 0;
				border-radius: 0;
				border-top: 1px solid #f2f2f2;
				border-bottom: 1px solid #f2f2f2;
			}

			.pay_price {
				padding: 15rpx 0;

				.b_price {
					float: right;

					.orderPrice {
						font-size: 32rpx;
					}
				}
			}

			.ep_text {
				font-size: 26rpx;
				padding-top: 6rpx;
			}

			.order_top {
				padding-bottom: 15rpx;

				.time {
					font-size: 28rpx;
					color: #666;
				}

				.status {
					font-size: 28rpx;
					color: #f00;
					font-weight: 600;
				}
			}


		}
	}
</style>